	<template>
		<view class="classics-box" id="box-id" :style="{height:height}">
			<scroll-view class="classics-left" scroll-y="true" scroll-with-animation :scroll-into-view="clickId">
				<view v-for="(item,index) in contentData" :key="item.id" :id="item.id" class="classics-left-item"
					:class="picked==index?'checkedStyle':''" @click="selectActiveEvt(item)">
					{{item.title}}
				</view>
			</scroll-view>
			<!-- :scroll-top="scrollRightTop" -->
			<scroll-view scroll-y="true" :scroll-into-view="clickId" :scroll-anchoring="true" scroll-with-animation
				class="classics-right" @scroll.stop="scrollEvt">
				<view class="classics-right-item" v-for="item in contentData" :key="item.id" :id="item.id">
					<view class="title">
						{{item.title}}
					</view>
					<view class="item-box" v-for="it in item.content">
						<view class="item-box-right">
							<view class="item-box-right-name">
								{{it.name}}
							</view>
							<view class="item-box-right-describe">
								{{it.desc}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</template>

	<script>
		export default {
			props: {
				fatherHeight: {
					type: Number
				}
			},
			components: {},
			data() {
				return {
					contentData: [{
							id: 'tab1',
							title: '热销专区',
							content: [{
									id: 101,
									img: 'static/rexiao1.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
								{
									id: 102,
									img: 'static/rexiao2.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
							]
						},
						{
							id: 'tab2',
							title: '生日鲜花',
							content: [{
									id: 201,
									img: 'static/shengri1.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
								{
									id: 202,
									img: 'static/shengri2.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
							]
						},
						{
							id: 'tab3',
							title: 'tab3',
							content: [{
									id: 301,
									img: 'static/rexiao1.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
								{
									id: 302,
									img: 'static/rexiao2.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
							]
						},
						{
							id: 'tab4',
							title: 'tab4',
							content: [{
									id: 404,
									img: 'static/rexiao1.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
								{
									id: 404,
									img: 'static/rexiao2.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
							]
						},
						{
							id: 'tab5',
							title: 'tab5',
							content: [{
									id: 505,
									img: 'static/rexiao1.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
								{
									id: 505,
									img: 'static/rexiao2.png',
									name: '郁金香',
									desc: '花语',
									price: '99',
								},
							]
						},
					], //列表数据
					clickId: 'tab1', //点击选项的id
					picked: 0, // 左侧选中选项的index
					nowRightIndex: 0, // 右边当前滚动的index
					itemArr: [], //用于存放右侧item位置数据
					scrollRightTop: 0,
					timer: null,
					height: 'auto'
				}
			},

			methods: {
				// 左侧切换点击事件
				selectActiveEvt(e) {
					this.clickId = e.id;
					this.picked = this.contentData.findIndex(it => it.id == e.id);
				},
				scrollEvt(e) {
					// 防抖
					if (this.timer) {
						clearTimeout(this.timer);
					}
					this.timer = setTimeout(() => {
						this.nowRightIndex = this.itemArr.findLastIndex(it => e.detail.scrollTop >= (it.bottom -
							228)) + 1; //判断当前顶部是处于哪个item，获取当前item的index
						if (this.nowRightIndex == -1) this.nowRightIndex = 0;
						if (this.nowRightIndex == this.picked) return;
						this.clickId = this.contentData[this.nowRightIndex].id;
						this.picked = this.nowRightIndex;
					}, 500);
				},
				// 计算右侧每个item到顶部的距离，存放到数组
				getItemDistence() {
					new Promise(resolve => {
						let selectQuery = uni.createSelectorQuery().in(this);
						selectQuery.selectAll('.classics-right-item').boundingClientRect(rect => {
							if (!rect.length) {
								setTimeout(() => {
									this.getItemDistence();
								}, 10);
								return;
							}
							rect.forEach(it => {
								this.itemArr.push(it); // 这里获取到的数据是每个item距离页面顶部的数据，以及每个item的自身数据
								resolve();
							})
						}).exec()
					})
				},
			},
			mounted() {
				let selectQuery = uni.createSelectorQuery().in(this);
				selectQuery.select('#box-id').boundingClientRect(data => {
					if(this.fatherHeight && data.height > this.fatherHeight){
						this.height = `${this.fatherHeight}px`;
					}else{
						this.height = `${data.height}px`;
					}
				}).exec()

			
				// 设置一个延时，确保所有dom和样式加载完成，否则拿到的数据可能有误
				setTimeout(()=>{
					this.getItemDistence();
				},500)
			},
		}
	</script>

	<style lang="scss" scoped>
		.classics-box {
			display: flex;

			.classics-left {
				width: 200rpx;
				height: 100%;
				background-color: #eee;
				.classics-left-item{
					padding: 24rpx;
					&.checkedStyle{
						background-color: #fff;
					}
				}
			}

			.classics-right {
				flex: 1;
				height: 100%;
				.classics-right-item{
					padding: 48rpx;
				}
			}
		}
	</style>